<!--
  components: app-header
  头部添加价格栏
-->
<app-header></app-header>

<!-- 内容列表显示区域 -->
<div nz-row [nzGutter]="8" class="timePanel">
    <div nz-col [nzSpan]="22" [nzOffset]="1" *ngIf="yearsList.length">
      <!-- 年 start -->
      <nz-collapseset [nzBordered]="false" class="timePanel__years">
        <nz-collapse *ngFor="let years of yearsList" 
                    [nzTitle]="years.name + '年'" [nzActive]="years.active"
                    (click)="getYears(years)">
          <a class="timePanel__years__tooltip">
            <i class="anticon anticon-pay-circle-o"></i> {{ years.sum }}
          </a>
          <!-- 月 start -->
          <nz-collapseset [nzBordered]="false" class="timePanel__month">
              <nz-collapse *ngFor="let month of years.children" 
                          [nzTitle]="month.name + '月'" [nzActive]="month.active"
                          (click)="getMonth(month)">
                <a class="timePanel__years__tooltip">
                  <i class="anticon anticon-pay-circle-o"></i> {{ month.sum }}
                </a>
                <!-- 日 start -->
                <nz-collapseset [nzBordered]="false" class="timePanel__day">
                  <nz-collapse *ngFor="let day of month.children" 
                              [nzTitle]="day.name + '日'" [nzActive]="day.active"
                              (click)="getEvent(day)">
                    <a class="timePanel__years__tooltip">
                      <i class="anticon anticon-pay-circle-o"></i> {{ day.sum }}
                    </a>
                    <nz-timeline class="timePanel__timeline">
                      <nz-timeline-item *ngFor="let hours of day.children">
                        <div nz-row [nzGutter]="8">
                            <div nz-col [nzSpan]="9">
                              {{ hours.date }}
                            </div>
                            <div nz-col [nzSpan]="10">
                              {{ hours.content }}
                            </div>
                            <div nz-col [nzSpan]="5">
                              <i class="anticon anticon-pay-circle-o"></i> {{ hours.price }}
                            </div>
                        </div>
                      </nz-timeline-item>
                    </nz-timeline>
                  </nz-collapse>
                </nz-collapseset>
                <!-- 日 end -->
              </nz-collapse>
            </nz-collapseset>
          <!-- 月 end -->
        </nz-collapse>
      </nz-collapseset>
      <!-- 年 end -->
    </div>
    <!-- loading -->
    <div class="listLoading" *ngIf="!yearsList.length">
        <nz-spin [nzSize]="'large'"></nz-spin>
    </div>
</div>